<script>
import { batchSaveTableColumns, getTableColumnsByTableId, getTableList } from '@/api/form'

export default {
  name: 'AddElement',
  props: {
    groupId: null,
    formId: null
  },
  data() {
    return {
      activeTable: '',
      tableSelect: [],
      fieldList: [],
      fieldSelect: []
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      getTableList({ page: 1, limit: 1000 }).then(resp => {
        const { data } = resp
        this.tableSelect = data.list
      })
    },
    handleChangeTable(tableId) {
      getTableColumnsByTableId(tableId).then(resp => {
        const { data } = resp
        this.fieldList = data.fieldList || []
      })
    },
    onSubmit() {
      const fields = this.fieldList || []
      if (fields.length > 0) {
        const tscConv = fields.map((field) => {
          return {
            groupId: this.groupId,
            formId: this.formId,
            name: field.attrName,
            label: field.fieldComment,
            alias: field.attrName,
            span: 12,
            type: this.defaultTypeFactory(field.fieldType),
            defaultValue: null,
            placeholder: '请输入' + field.fieldComment,
            hidden: false,
            disabled: false,
            readonly: false,
            clearable: true,
            required: false,
            validMessage: '请输入' + field.fieldComment,
            attributes: JSON.stringify({}),
            changeEvent: null,
            inputEvent: null,
            blurEvent: null,
            focusEvent: null,
            trigger: 'blur',
            width: '100%'
          }
        })
        batchSaveTableColumns({ groupId: this.groupId, fields: tscConv }).then(() => {
          this.$message.success('保存成功')
          this.$emit('close')
        })
      } else {
        this.$emit('close')
      }
    },
    handleSelect(selection) {
      this.fieldSelect = selection
    },
    handleSelectAll(selection) {
      this.fieldSelect = selection
    },
    defaultTypeFactory(fieldType) {
      if (fieldType === 'datetime') {
        return 'date'
      }
      if (fieldType === 'date') {
        return 'date'
      }
      if (fieldType === 'int') {
        return 'number'
      }
      return 'input'
    }
  }
}
</script>

<template>
  <el-dialog v-bind="$attrs" title="选择添加字段" close-on-click-modal width="60%">
    <el-form>
      <el-form-item>
        <el-select v-model="activeTable" style="width: 45%" @change="handleChangeTable">
          <el-option v-for="op in tableSelect" :key="op.tableName" :label="op.tableName" :value="op.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="fieldList" border height="45vh" @select="handleSelect" @select-all="handleSelectAll">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" prop="tableName" align="center" width="55" label="序号" />
      <el-table-column prop="fieldComment" label="字段描述" />
      <el-table-column prop="fieldName" label="字段名称" />
      <el-table-column prop="fieldType" label="字段类型" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('close', false)">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
